{# SPDX-License-Identifier: Apache-2.0 -#}
{% extends "manage/manage_base.html" %}
{% set user = request.user %}
{% set title = gettext("Set up 2FA with a security device (e.g. USB key)") %}
{% set active_tab = "account" %}
{% block title %}{{ title }}{% endblock %}
{% block main %}
  <h1 class="page-title page-title--wsubtitle heading-wsubtitle__heading">{{ title }}</h1>
  <p class="heading-wsubtitle__subtitle">
    {% trans href='https://fidoalliance.org/certification/fido-certified-products/', title=gettext('External link') %}PyPI supports any device that adheres to the <a href="{{ href }}" title="{{ title }}" target="_blank" rel="noopener">FIDO standard</a>.{% endtrans %}
    <br>
    {% trans title=gettext('External link'), yubico_href='https://www.yubico.com/', titan_href='https://cloud.google.com/titan-security-key/', thetis_href='https://thetis.io/' %}
    Popular <em>USB keys</em> include
    <a href="{{ yubico_href }}"
       title="{{ title }}"
       target="_blank"
       rel="noopener">Yubikey</a>,
    <a href="{{ titan_href }}"
       title="{{ title }}"
       target="_blank"
       rel="noopener">Google Titan</a>
    and <a href="{{ thetis_href }}"
    title="{{ title }}"
    target="_blank"
    rel="noopener">Thetis</a>.
  {% endtrans %}
</p>
<noscript>
  <p>
    {% trans %}Enable JavaScript to set up two factor authentication with a security device (e.g. USB key){% endtrans %}
  </p>
</noscript>
<form id="webauthn-provision-form">
  <div class="form-group">
    <label for="webauthn-provision-label" class="form-group__label">
      {% trans %}Name your device to begin{% endtrans %}
      <span class="form-group__required">{% trans %}(required){% endtrans %}</span>
    </label>
    <input id="webauthn-provision-label"
           type="text"
           name="label"
           class="form-group__field"
           aria-describedby="webauthn-errors">
    <p class="form-group__help-text">
      {% trans %}PyPI supports adding multiple security devices.{% endtrans %}
      <br>
      {% trans %}Please give this device a name. 64 characters or fewer. All Unicode is valid, including spaces.{% endtrans %}
    </p>
    <ul id="webauthn-errors" class="form-errors margin-top--large">
      <li id="webauthn-browser-support" class="hidden">
        {% trans href='https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential#Browser_compatibility', title=gettext('External link') %}
        <a href="{{ href }}" title="{{ title }}" target="_blank" rel="noopener">Upgrade your browser</a> to set up two factor authentication with a security device (e.g. USB key)
      {% endtrans %}
    </li>
  </ul>
</div>
<div>
  <button type="submit"
          id="webauthn-provision-begin"
          class="button button--primary"
          value="{{ request.session.get_csrf_token() }}"
          disabled>{% trans %}Set up security device{% endtrans %}</button>
</div>
</form>
<br>
<div class="callout-block">
  <p>
    {% trans title=gettext('External link'), fido_href='https://fidoalliance.org/specifications/download/', mozilla_href='https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential#Browser_compatibility' %}
    <strong>Not working?</strong> Check you're using a device that follows the <a href="{{ fido_href }}"
    title="{{ title }}"
    target="_blank"
    rel="noopener">FIDO specification</a> and a <a href="{{ mozilla_href }}"
    title="{{ title }}"
    target="_blank"
    rel="noopener">compatible browser</a>.
  {% endtrans %}
</p>
<p>
  {% trans %}Note that some older USB keys do not adhere to the FIDO standard and will not work with PyPI.{% endtrans %}
</p>
</div>
{% endblock %}
